<template>
  <div class="outputs-list">
    <div v-for="(output, idx) in modelValue" :key="idx" class="output-item">
      <a-input
        :model-value="output.name"
        @update:modelValue="(v) => onNameChange(idx, v as string)"
        placeholder="出参名称"
        class="output-name"
        size="small"
        allow-clear
      />
      <a-input
        :model-value="output.key"
        @update:modelValue="(v) => onKeyChange(idx, v as string)"
        placeholder="出参key"
        class="output-key"
        size="small"
        allow-clear
        :disabled="isProtected(output)"
      />
      <a-select
        :model-value="output.type"
        @update:modelValue="(v) => onTypeChange(idx, v as string)"
        class="output-type"
        size="small"
        style="width: 120px"
      >
        <a-option value="string">文本</a-option>
        <a-option value="number">数值</a-option>
        <a-option value="boolean">布尔</a-option>
        <a-option value="object">对象</a-option>
      </a-select>
      <a-tooltip v-if="isProtected(output)" content="系统默认出参，无法删除">
        <a-button size="mini" type="text" status="danger" disabled>删除</a-button>
      </a-tooltip>
      <a-button
        v-else
        size="mini"
        type="text"
        status="danger"
        @click="remove(idx)"
      >删除</a-button>
    </div>
    <a-button type="outline" size="small" class="add-btn" @click="add">+ 添加出参</a-button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: Array<{ name: string; key?: string; type: string }>
  protectedKeys?: string[]
}>();
const emit = defineEmits<{
  'update:modelValue': [value: Array<{ name: string; key?: string; type: string }>]
}>();

function isProtected(o: { key?: string }) {
  const k = String(o?.key || '').trim();
  const list = Array.isArray(props.protectedKeys) ? props.protectedKeys : [];
  return !!k && list.includes(k);
}

function add() {
  const next = [...props.modelValue, { name: '', key: '', type: 'string' }];
  emit('update:modelValue', next);
}
function remove(idx: number) {
  const next = props.modelValue.slice();
  next.splice(idx, 1);
  emit('update:modelValue', next);
}
function onNameChange(idx: number, val: string) {
  const next = props.modelValue.slice();
  const cur = next[idx] || { name: '', key: '', type: 'string' };
  // 仅更新名称，不联动 key
  next[idx] = { ...cur, name: val };
  emit('update:modelValue', next);
}
function onKeyChange(idx: number, val: string) {
  const next = props.modelValue.slice();
  next[idx] = { ...next[idx], key: (val || '').trim() };
  emit('update:modelValue', next);
}
function onTypeChange(idx: number, val: string) {
  const next = props.modelValue.slice();
  next[idx] = { ...next[idx], type: val };
  emit('update:modelValue', next);
}
</script>

<style scoped>
.outputs-list { display: flex; flex-direction: column; gap: 8px; }
.output-item { display: flex; gap: 8px; align-items: center; }
.output-name { flex: 1; }
.output-key { width: 160px; }
.output-type { width: 120px; }
.add-btn { margin-top: 8px; }
</style>
